<!-- 授权绑定微信 -->
<template>
  <div class="auth-bind-wx">
    <el-form :model="fm.ps" :rules="fm.rules" :ref="fm.fname" size="medium">
      <div class="fm-title">授权绑定微信</div>
      <el-form-item prop="lphone">
        <el-input prefix-icon="el-icon-mobile-phone" placeholder="请输入手机号码" maxlength="11" clearable
          v-model="fm.ps.lphone"></el-input>
      </el-form-item>

      <el-form-item style="text-align: center;">
        <el-button icon="el-icon-connection" :loading="fm.sb.load" type="primary" @click="subForm">立即绑定</el-button>
      </el-form-item>

      <div class="fm-tip">注意：此绑定主要用于接收微信公众号订单消息，仅用于车队驾驶员使用！</div>
    </el-form>
  </div>
</template>

<script>
import * as commonSer from '@/api/services/common.service';

export default {
  name: 'AuthBindWx',
  data() {
    return {
      fm: {
        sb: { load: false },
        fname: 'loginFm',
        ps: {
          lphone: '',
          tabindex: ""
        },
        rules: {
          lphone: [
            { required: true, message: '请输入登录手机号' },
            { min: 11, max: 11, message: '手机号由11位数字组成' }
          ]
        }
      },
    }
  },
  created() {
    document.title = '授权绑定微信';

  },
  mounted() {
    let url = window.location.href;
    var str1 = url.split('?')[1]
    var str2 = str1.split('=')[1]
    this.fm.ps.tabindex = str2
    console.log(this.fm.ps)
  },
  methods: {
    // 表单提交
    subForm() {
      let that = this, U = that.U, fm = that.fm, ps = U.scopy(fm.ps), sb = fm.sb;

      that.$refs[fm.fname].validate((valid) => {
        if (!valid) { return false; } else {
          sb.load = true;
          let loading = U.qloading('绑定中，请稍后...');
          commonSer.valAuthPhone(ps).then(res => {
            if (res.code != 1) {
              U.qalert(res.msg, '温馨提示');
            } else {
              // 直接跳转至授权url
              window.location.href = res.authUrl;
            }
          })

          setTimeout(() => { sb.load = false; U.qclose(loading); }, 10000);
        }
      });
    }
  },
}
</script>

<style lang="less" scoped>
.auth-bind-wx {
  padding-top: 100px;
  height: 100%;
  display: flex;
  justify-content: center;
  background: #f3f3f3;

  .fm-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
  }

  .fm-tip {
    font-size: 12px;
    color: #666;
  }

  .el-form {
    background: #fff;
    box-shadow: 0 1px 14px rgba(0, 0, 0, 0.3);
    padding: 30px;
    width: 70%;
    border-radius: 5px;
    height: 300px;

    ::v-deep input {
      color: #2979ff;
      font-weight: bold;
    }
  }
}
</style>
